<template>
  <div class="gismap-data">
    <el-card :body-style="{ padding: '0px' }">
      <el-button type="primary" size="mini" @click="basicData">基本数据</el-button>
      <el-dialog
        :visible.sync="dialogVisible"
        width="70%"
        :modal="false"
        :show-close="false"
        :before-close="handleClose">
        <el-row :gutter="20">
          <el-col :span="12" style="background:#150e3b">
            <div id="myChart" :style="{height: '300px',background:'#1f1b49'}"></div>
          </el-col>
          <el-col :span="12">
            <div id="myChart1" :style="{height: '300px',background:'#1f1b49'}"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:20px;">
          <el-col :span="12" style="background:#150e3b">
            <div id="myChart2" :style="{height: '300px',background:'#1f1b49'}"></div>
          </el-col>
          <el-col :span="12">
            <div id="myChart3" :style="{height: '300px',background:'#1f1b49'}"></div>
          </el-col>
        </el-row>
      </el-dialog>
      <baidu-map class="bm-view"
      :center="center" 
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @moving="baidumoving()"
      :mapStyle="mapStyle">
      <bm-boundary name="天津市大张庄镇" :strokeWeight="1" strokeColor="#137CE8" :fill-opacity="0.3"></bm-boundary>
        <template v-for="(item, index) in points">
          {{item}} 
          <bm-marker :key="index"
            :position="item"
            :dragging="false"
            :icon="item.deviceStatus === '0'? mpIcon.icon0:mpIcon.icon1"
            @click="infoWindowOpen($event,index)">
          </bm-marker>
        </template>
      </baidu-map>
      <el-row class="tanchu" v-show="tanchu">
        <el-col :span="24" style="margin-bottom:20px;">
          <el-button class="tanchubtn" type="text" icon="el-icon-close" @click="closetanchu"></el-button>
        </el-col>
        <el-col :span="24">
          <div class="personName"><i class="el-icon-s-shop fonticon"></i>店铺名：{{personName}}</div>
          <div class="personName"><i class="el-icon-location-information fonticon"></i>{{Address}}</div>
        </el-col>
        <el-col :span="24">
          <img src="../../assets/qiyelogo.png" style="width:95%;margin:10px;"/>
        </el-col>
        <el-col :span="24" style="padding: 0 10px;">
          <el-table
            :data="tableDataid"
            class="tableDataid"
            border
            style="width: 100%;margin-top:20px;">
            <el-table-column
              prop="imei"
              label="设备编号">
            </el-table-column>
            <el-table-column prop="deviceStatus" label="设备状态">
              <template slot-scope="scope">
                <span v-text="scope.row.deviceStatus==='0'?'正常':'异常'">
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-col :span="12">
            <div class="personName" style="margin-left:10px;"><i class="el-icon-phone-outline fonticon"></i>{{personTel}}</div>
          </el-col>
          <el-col :span="12">
            <div class="personName" style="margin-left:10px;">维修次数：{{personTimes}}</div>
          </el-col>
        </el-col>
        <el-col :span="24">
          <div class="personName" style="margin-left:20px;">设备总运行时长：{{personNormal}}</div>
        </el-col>
        <el-col :span="24">
          <div class="personName" style="margin-left:20px;">距离上次维修时间已经过了{{personMain}}</div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
// import ToolsBtn from "../../components/Tools/ToolsBtn";
import Alarm from '../../assets/youyan.png';
import Alarm1 from '../../assets/youyan1.png';
import echarts from "echarts";
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require("echarts/lib/component/legendScroll");
export default {
  name: 'GisMap',
  // components: {
  //   ToolsBtn
  // },
  data () {
    return {
      toolsData: {
        // title: '地图显示',
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      },
      center: {lng: 0, lat: 0},
      zoom: 3,
      points: [],
      mpIcon: {
        icon0: {
          url: '',
          size: { width: 32, height: 32 }
        },
        icon1: {
          url: '',
          size: { width: 32, height: 32 }
        }
      },
      tanchu: false,
      personName: '',
      Imei: '',
      Address: '',
      maiPlan: '',
      tableDataid: [],
      mapStyle: {
        styleJson: [
          {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
                "color": "#021019"
            }
          },
          {
            "featureType": "highway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#000000"
            }
          },
          {
            "featureType": "highway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#147a92"
            }
          },
          {
            "featureType": "arterial",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#000000"
            }
          },
          {
            "featureType": "arterial",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#0b3d51"
            }
          },
          {
            "featureType": "local",
            "elementType": "geometry",
            "stylers": {
                "color": "#000000"
            }
          },
          {
            "featureType": "land",
            "elementType": "all",
            "stylers": {
                "color": "#08304b"
            }
          },
          {
            "featureType": "railway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#000000"
            }
          },
          {
            "featureType": "railway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#08304b"
            }
          },
          {
            "featureType": "subway",
            "elementType": "geometry",
            "stylers": {
                "lightness": -70
            }
          },
          {
            "featureType": "building",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#000000"
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#857f7f"
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#000000"
            }
          },
          {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
                "color": "#022338"
            }
          },
          {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
                "color": "#062032"
            }
          },
          {
            "featureType": "boundary",
            "elementType": "all",
            "stylers": {
                "color": "#1e1c1c"
            }
          },
          {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
                "color": "#022338"
            }
          },
          {
            "featureType": "poi",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
          },
          {
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#2da0c6",
                "visibility": "on"
            }
          }
        ]
      },
      restaurant: '',
      our: "#E6A23C",
      clean: '',
      bull: "#F56C6C",
      online: '',
      disposal: '',
      yellow: "#67C23A",
      // basicData: false,
      dialogVisible: false,
      personTel: '',
      personTimes: '',
      personNormal: '',
      personMain: ''
    }
  },
  created(){
    this.getList();
    this.getqiyeList();
  },
  methods: {
    basicData(){
      if(this.tanchu === true){
        this.tanchu = false;
      }
      this.dialogVisible = true;
      var restaurant = this.restaurant
      var clean = this.clean
      var online = this.online
      var disposal = this.disposal
      setTimeout(function(){
        var myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption({
          color: ['#7ef5fe'],
          title: {
              text: '本月餐饮企业数量',
              padding: 15,
              textStyle: {
                color: '#fff',
                fontSize: 12,
                marginTop: 20
              }
          },
          tooltip: {},
          xAxis: {
              data: ['前三周', '前二周', '前一周', '本周'],
              axisLabel: {
                textStyle: {
                    color: '#807d98'
                }
              },
          },
          yAxis: {
            axisLabel: {
              textStyle: {
                  color: '#807d98'
              }
            }
          },
          series: [{
              name: '餐饮企业数量',
              type: 'bar',
              barWidth: 20,
              data: [restaurant, restaurant, restaurant, restaurant]
          }]
        });
        var myChart1 = echarts.init(document.getElementById('myChart1'));
        myChart1.setOption({
          color: ['#b57cff'],
          title: {
              text: '清洗企业数量',
              padding: 15,
              textStyle: {
                color: '#2cdcc1',
                fontSize: 12,
                marginTop: 20
              }
          },
          tooltip: {},
          xAxis: {
              data: ['前三周', '前二周', '前一周', '本周'],
              axisLabel: {
                textStyle: {
                    color: '#807d98'
                }
              },
          },
          yAxis: {
            axisLabel: {
              textStyle: {
                  color: '#807d98'
              }
            }
          },
          series: [{
              name: '清洗企业数量',
              type: 'bar',
              barWidth: 20,
              data: [clean, clean, clean, clean]
          }]
        });
        var myChart2 = echarts.init(document.getElementById('myChart2'));
        myChart2.setOption({
          color: ['#6b86e0'],
          title: {
              text: '在线设备数量',
              padding: 15,
              textStyle: {
                color: '#568aff',
                fontSize: 12,
                marginTop: 20
              }
          },
          tooltip: {},
          xAxis: {
              data: ['前三周', '前二周', '前一周', '本周'],
              axisLabel: {
                textStyle: {
                    color: '#807d98'
                }
              },
          },
          yAxis: {
            axisLabel: {
              textStyle: {
                  color: '#807d98'
              }
            }
          },
          series: [{
              name: '在线设备数量',
              type: 'bar',
              barWidth: 20,
              data: [online, online, online, online]
          }]
        });
        var myChart3 = echarts.init(document.getElementById('myChart3'));
        myChart3.setOption({
          color: ['#8a50ff'],
          title: {
              text: '待处理问题数',
              padding: 15,
              textStyle: {
                color: '#fb5454',
                fontSize: 12,
                marginTop: 20
              }
          },
          tooltip: {},
          xAxis: {
              data: ['前三周', '前二周', '前一周', '本周'],
              axisLabel: {
                textStyle: {
                    color: '#807d98'
                }
              }
          },
          yAxis: {
            axisLabel: {
              textStyle: {
                  color: '#807d98'
              }
            }
          },
          series: [{
              name: '待处理问题数',
              type: 'bar',
              barWidth: 20,
              data: [disposal, disposal, disposal, disposal]
          }]
        });
      },200)
    },
    getqiyeList(){
      this.$api.BASICDISPLAY.basicData()
      .then(res => {
        this.restaurant = res.data.repastCount
        this.clean = res.data.cleanerCount
        this.online = res.data.onlineCount
        this.disposal = res.data.pendingCount
      })
      .catch(() => {
        this.$message({
          message:"暂无数据",
          type: 'error'
        }); 
      })
    },
    getList(){
      this.center.lng = 117.197556
      this.center.lat = 39.202063
      this.zoom = 14
      this.$api.WEBSITE.getMapData({
        permissionId: 2
      })
      .then(res => {
        const points = []
        for(var i=0;i<res.data.length;i++){
          if(res.data[i].deviceStatus === "0"){
            this.mpIcon.icon0.url = Alarm
          } else if(res.data[i].deviceStatus === "1"){
            this.mpIcon.icon1.url = Alarm1
          }
          const arr = {
            id: res.data[i].id,
            lng: res.data[i].bd_longtitude,
            lat: res.data[i].bd_latitude,
            deviceStatus: res.data[i].deviceStatus,
            show: false,
            imei: res.data[i].imei,
            deviceProducer: res.data[i].deviceProducer,
            position: res.data[i].position,
            maintainPlan: res.data[i].maintainPlan
          }
          points.push(arr)
        }
        this.points = points;
      })
    },
    infoWindowOpen(event, index){
      if(this.basicData === true){
        this.basicData = false
      }
      this.tanchu = true;
      let _getPosition = event.target.getPosition()
      this.$api.WEBSITE.getMapData({
        permissionId: 2
      })
      .then(res => {
        for(var i=0;i<res.data.length;i++){
          if(_getPosition.lat == res.data[i].bd_latitude || _getPosition.lng == res.data[i].bd_longtitude){
            this.$api.WEBSITE.getMapData1({
              rid: res.data[i].rid
            })
            .then(res => {
              this.tableDataid = res.data
              for(var j=0;j<res.data.length;j++){
                this.personTel = res.data[j].tel
                this.personTimes = res.data[j].mainTainTimes
                this.personName = res.data[j].person_name
                this.personNormal = res.data[j].normalTime
                this.personMain = res.data[j].lastMainTainTime
                this.Imei = res.data[j].imei
                this.Address = res.data[j].address
                this.maiPlan = res.data[j].maintainPlan
              }
            })
          }
        }
      })
      let show = this.points[index].show;
      this.points[index].show = !show;
      this.points[index].lng = _getPosition.lng;
      this.points[index].lat = _getPosition.lat;
    },
    infoWindowClose(event,index){
      this.points[index].show = false;
    },
    closetanchu(){
      this.tanchu = false;
    },
    baidumoving(){
      this.tanchu = false;
    },
    handleClose(){
      this.dialogVisible = false;
    },
    // 新增数据
    addData(){

    },
    // 刷新数据
    refresh(){

    },
    // 搜索数据
    search(){

    },
    // 设置字段
    fieldSet(){

    },
    // 隐藏表格操作列
    hasOperation(){
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style scoped>
.el-main #containerBackstage{
  margin: -20px;
  margin-left: -5px;
}
</style>
<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 840px;
  max-height: 840px;
}
/deep/.BMap_cpyCtrl {
  display: none;
}
/deep/.anchorBL {
  display: none;
}
/deep/.el-card__body{
  position: relative;  
} 
.tanchu{
  position: absolute;
  top: 28px;
  right: 0;
  width: 400px;
  height: 840px;
  max-height: 840px;
  background: #26323b;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity:0.8;
  opacity: 0.8; 
}
.fonticon{
  font-size: 22px;
  color: #62dffe;
  margin: 0 10px;
}
.personName{
  color: #fff;
  font-size: 18px;
  margin: 10px 0;
}
/deep/.tableDataid thead tr th, /deep/.tableDataid tbody tr td{
  background: #2e3235;
  color: #fff;
}
/deep/.tableDataid tbody tr:hover>td{
  background: #2e3235;
}
/deep/.el-dialog{
  height: 80%;
  background: #26323b;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity:0.8;
  opacity: 0.8;
  /deep/.el-dialog__close{
    color: #fff;
  }
}
.tanchubtn{
  float: right;
  margin-right: 10px;
  background: #8b8b8b;
  color: #24292d;
  margin-top: 10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  /deep/.el-icon-close{
    font-size: 22px;
    margin-top: -10px;
  }
}
</style>